<template>
	<view>
		<Header></Header>
		<view>
			<!-- banner -->
			<view class="flex-column flex-align banner">
				<view class="flex-row flex-center banner-text">
					<text class="suidian">随点科技 </text>
					<text class="didaima">低代码开发平台</text>
				</view>
				<text class="linghuo">灵活满足不同需求的用户</text>
			</view>
			<!-- 产品价格 -->
			<view class="flex-column flex-center flex-align price">
				<text class="pricetext">产品价格</text>
				<view class="flex-row common-table">
					<view class="flex-column flex-around flex-align jdb-background">
						<text>基础版</text>
						<view class="jcbzx" @click="show = true">立即咨询</view>
					</view>
					<view class="flex-column flex-around flex-align dzb-background">
						<text>定制版</text>
						<view class="dzbzx" @click="show = true">立即咨询</view>
					</view>
				</view>
				<view class="flex-column common-table1">
					<view v-for="(i,index) in priceList" class="flex-row ">
						<view class="flex-row flex-align common-table2">
							<text class="table2-title">{{ i.title }}</text>
						</view>
						<view class="flex-row flex-center flex-align common-table3">
							<image class="tubiao" v-if="i.jichu.status==1"
								src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/zimg119.png" alt="">
								<image class="tubiao" v-else-if="i.jichu.status==0"
									src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/zimg118.png"
									alt="">
									<text class="table3-name" v-else>{{ i.jichu.name }}</text>
						</view>
						<view class="flex-row flex-center flex-align common-table4">
							<image class="tubiao" v-if="i.dingzhi.status==1"
								src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/zimg119.png" alt="">
								<image class="tubiao" v-else-if="i.dingzhi.status==0"
									src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/zimg118.png"
									alt="">
									<text class="table3-name" v-else>{{ i.dingzhi.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class=" flex-column flex-align pricebg2"></view>
			<!-- 运行引擎 -->
			<view class="flex-column flex-align flex-center run">
				<text class="run-engine-run">运行引擎</text>
				<view class="flex-column flex-align run-engine-text">
					<text>使用随点平台开发的项目</text>
					<text>项目运行需要运行引擎提供页面解析、接口解析</text>
					<text>组件运行、服务运行等功能</text>
				</view>
			</view>

			<view class="flex-column flex-align engine">
				<view class="flex-column flex-align flex-between gongneng">
					<view class="gongneng-yellow"></view>
					<text class="gongneng-text">功能</text>
					<view class="xiantiao"></view>
					<text class="gongneng-neirong"> 页面解析
						接口解析
						服务运行
						授权管理</text>
				</view>

				<view class="flex-column flex-align flex-between fufei">
					<view class="gongneng-yellow"></view>
					<text class="gongneng-text">付费</text>
					<view class="xiantiao"></view>
					<view class="flex-column flex-align fufeineirong">
						<text>付费方式：License付费</text>
						<text>标准容量：30个页面</text>
						<text>页面扩容：支持部署</text>
						<text>方式：离线部署</text>
						<text>服务器：单服务器授权</text>
					</view>
				</view>

				<view class="flex-column flex-align flex-between fufei">
					<view class="gongneng-yellow"></view>
					<text class="gongneng-text">权益</text>
					<view class="xiantiao"></view>
					<view class="flex-column flex-align fufeineirong">
						<text>永久商用授权</text>
						<text>不限制访问时效</text>
						<text>项目部署授权认证</text>
						<text>迁移部署更新</text>
					</view>
				</view>
			</view>
			<!-- 新人专享 -->
			<view class="flex-column flex-align flex-center newcomers">
				<view class="click-price" @click="show = true">点击咨询优惠价格</view>
			</view>
			<!-- 增值套餐 -->
			<view class="flex-column flex-align flex-center increment">
				<text class="increment-text">多模式增值套餐，灵活合作方式</text>
				<view>
					<view class="flex-column flex-align price-wbk">
						<view class="price-yellowbk">技术服务套餐</view>
						<view class="flex-row flex-align flex-center price-tuwen ">
							<image class="price-image"
								src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/index/pic_2.1.png">
							</image>
							<text class="price-text"> 适用于项目开发场景基础较弱<br>或无研发团队的企业，委托随<br>点科技开发项目</text>
						</view>
					</view>

					<view class="flex-column flex-align price-wbk">
						<view class="price-yellowbk">行业应用套餐</view>
						<view class="flex-row flex-align flex-center price-tuwen ">
							<image class="price-image"
								src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/index/pic_2.2.png">
							</image>
							<text class="price-text"> 打包随点成品智慧应用标准模<br>板支持一次购买批量复制推广</text>
						</view>
					</view>

					<view class="flex-column flex-align price-wbk">
						<view class="price-yellowbk">数据治理套餐</view>
						<view class="flex-row flex-align flex-center price-shujutw ">
							<image class="price-shujuimage"
								src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/index/pic_2.3.png">
							</image>
							<text class="price-text"> 打通数据孤岛，解决业务数据<br>分散难题，数据分析推动业务决策</text>
						</view>
					</view>
				</view>
			</view>
			<!-- popup弹出层 -->
			<u-popup :show="show" mode="center" @close="close" @open="open">
				<view class="flex-column flex-center flex-align wxcode">
					<image class="wxcode-img"
						src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/code.png"></image>
					<text class="wxcode-text">扫描二维码进入群聊</text>
				</view>
			</u-popup>
		</view>
		<Footer></Footer>
	</view>
</template>

<script>
	import Header from '@/commonponet/header/header.vue'
	import Footer from '@/commonponet/footer/footer.vue'
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				show: false,
				priceList: [{
						title: '项目创建数量',
						jichu: {
							status: 2,
							name: '不限'
						},
						dingzhi: {
							status: 2,
							name: '不限'
						},
					},
					{
						title: '自定义登录页',
						jichu: {
							status: 0,
							name: ''
						},
						dingzhi: {
							status: 2,
							name: '可自定义登录页'
						},
					},
					{
						title: '自定义LOGO',
						jichu: {
							status: 0,
							name: ''
						},
						dingzhi: {
							status: 2,
							name: '可替换平台LOGO'
						},
					},
					{
						title: '应用支持',
						jichu: {
							status: 0,
							name: ''
						},
						dingzhi: {
							status: 2,
							name: '三个演示应用'
						},
					},
					{
						title: '售后服务群',
						jichu: {
							status: 2,
							name: '常规'
						},
						dingzhi: {
							status: 2,
							name: '技术 + 业务指导'
						},
					},
					{
						title: '赠送开发者账号',
						jichu: {
							status: 2,
							name: '2个'
						},
						dingzhi: {
							status: 2,
							name: '5个'
						},
					},
					{
						title: '系统培训',
						jichu: {
							status: 2,
							name: '定期集中培训'
						},
						dingzhi: {
							status: 2,
							name: '一对一培训'
						},
					},
					{
						title: '服务响应',
						jichu: {
							status: 2,
							name: '7*12服务响应'
						},
						dingzhi: {
							status: 2,
							name: '7*12服务响应'
						},
					},
					{
						title: '平台内置模板',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '3D组件',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: 'GIS地图组件',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '业务组件',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '大屏组件',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '快速表单',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '搭建WEB系统',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '数据可视化系统',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '业务流程系统',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '3D数字孪生系统',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '页面开发',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '接口管理',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '业务开发基础服务',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '组件自定义',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '版本管理',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '团队协作',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '许可管理',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '应用市场高级模板/组件',
						jichu: {
							status: 1,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
					{
						title: '专属客户成功',
						jichu: {
							status: 0,
							name: ''
						},
						dingzhi: {
							status: 1,
							name: ''
						},
					},
				]
			};
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	.banner {
		margin-top: 88rpx;
		width: 100%;
		height: 450rpx;
		background: url("https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/bg_price.png")no-repeat center center;
		background-size: 752rpx 450rpx;
	}

	.banner-text {
		margin-top: 140rpx;
		margin-left: 250rpx;
	}

	.suidian {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFC244;
	}

	.didaima {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-left: 20rpx;
	}

	.linghuo {
		font-size: 26rpx;
		line-height: 80rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-left: 220rpx;
	}

	.price {
		width: 100%;
		height: 2264rpx;
		background: #F7F7F7;
		background: url("https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/bg_1.png")no-repeat left 40rpx;
		background-size: 630rpx 428rpx;
	}

	.pricebg2 {
		height: 422rpx;
		background: url("https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/bg_2.png")no-repeat right bottom;
		background-size: 668rpx 422rpx;
		margin-top: -330rpx;
	}

	.pricetext {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
		margin-top: 80rpx;
		margin-bottom: 82rpx;
	}

	.common-table {
		margin-left: 254rpx;
	}

	.jdb-background {
		width: 222rpx;
		height: 125rpx;
		background: #DDEAF6;
		border-radius: 20rpx 0rpx 0rpx 0rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.jcbzx {
		width: 130rpx;
		height: 40rpx;
		background: #FF6E43;
		border-radius: 20rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 40rpx;
	}

	.dzb-background {
		width: 222rpx;
		height: 125rpx;
		background: #FF6E43;
		border-radius: 0rpx 20rpx 0rpx 0rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.dzbzx {
		width: 130rpx;
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #FF6E43;
		text-align: center;
		line-height: 40rpx;
	}

	.common-table1 {
		border: 2rpx solid #DCDCDC;
		border-radius: 20rpx 0rpx;
	}

	.common-table2 {
		width: 250rpx;
		height: 70rpx;
		// background: #FFFFFF;
		border-bottom: 1rpx solid #DCDCDC;
		line-height: 70rpx;
		text-align: center;
		margin-top: 2rpx;
	}

	.table2-title {
		font-size: 20rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 36rpx;
	}

	.common-table3 {
		width: 220rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-left: 1rpx solid #DCDCDC;
		border-right: 1rpx solid #DCDCDC;
		border-bottom: 1rpx solid #DCDCDC;
		margin-top: 2rpx;

	}

	.table3-name {
		font-size: 20rpx;
		font-weight: 400;
		color: #333333;
	}

	.common-table4 {
		width: 220rpx;
		height: 70rpx;
		// background: #FFFFFF;
		border-top: 1rpx solid #DCDCDC;
		margin-top: -2rpx;

	}

	.run {
		height: 355rpx;
		background: #0D1C2E;
	}

	.run-engine-run {
		font-size: 34rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.run-engine-text {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.63);
		margin-top: 40rpx;
	}

	.engine {
		height: 1218rpx;
		background: url('https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/bg_yyal.png')no-repeat right bottom;
		background-size: 750rpx 990rpx;
	}

	.gongneng {
		width: 415rpx;
		height: 381rpx;
		background: #FFFFFF;
		box-shadow: 5rpx 3rpx 38rpx 0rpx rgba(4, 0, 0, 0.07);
		border-radius: 10rpx;
		margin-top: -46rpx;
	}

	.fufei {
		width: 415rpx;
		height: 381rpx;
		background: #FFFFFF;
		box-shadow: 5rpx 3rpx 38rpx 0rpx rgba(4, 0, 0, 0.07);
		border-radius: 10rpx;
		margin-top: 22rpx;
	}

	.gongneng-yellow {
		width: 415rpx;
		height: 10rpx;
		background: #FFC244;
		border-radius: 10rpx;
	}

	.gongneng-text {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
	}

	.xiantiao {
		width: 359rpx;
		height: 1px;
		border-top: 1px solid #DCDCDC;
	}

	.gongneng-neirong {
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		margin-bottom: 44rpx;
	}

	.fufeineirong {
		margin-bottom: 44rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
	}

	.newcomers {
		height: 272rpx;
		background: url("https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/price/bg_zixun.png") no-repeat center center;
		background-size: 750rpx 272rpx;
	}

	.click-price {
		width: 247rpx;
		height: 54rpx;
		background: #FFFFFF;
		border-radius: 27rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #FF6E43;
		text-align: center;
		line-height: 54rpx;
		margin-top: 140rpx;
		margin-left: -270rpx;
	}

	.increment {
		width: 750rpx;
		height: 1310rpx;
		background: #F7F7F7;
	}

	.increment-text {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.price-wbk {
		width: 686rpx;
		height: 322rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 46rpx;
	}

	.price-yellowbk {
		width: 289rpx;
		height: 66rpx;
		background: #FFC244;
		border-radius: 10rpx;
		text-align: center;
		line-height: 66rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-top: -16rpx;
	}

	.price-tuwen {
		margin-top: 34rpx;
	}

	.price-shujutw {
		margin-top: 6rpx;
	}

	.price-image {
		width: 324rpx;
		height: 214rpx;
	}

	.price-shujuimage {
		height: 232rpx;
		width: 284rpx;
	}

	.price-text {
		width: 312rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-left: 6rpx;
	}

	.common-table {
		position: relative;
	}

	.tubiao {
		width: 24px;
		height: 20px;
	}

	.wxcode {
		width: 270rpx;
		height: 320rpx;
	}

	.wxcode-img {
		width: 226rpx;
		height: 226rpx;
		margin-top: 20rpx;
	}

	.wxcode-text {
		font-size: 24rpx;
		line-height: 48rpx;
		font-weight: 400;
		color: #333333;
	}
</style>
